<template>
  <a-drawer title="查询设备状态" placement="right" width="700px" destroyOnClose :visible="visible" @close="onClose">
    <div>
      <a-popconfirm placement="topRight" title="是否确认要对设备发送查询状态指令？" ok-text="确定" cancel-text="取消"
        @confirm="onSend">
        <a-button type="primary" style="margin-right: 12px;">查询状态</a-button>
      </a-popconfirm>
      <a-button type="link" icon="reload" @click="getList">刷新结果列表</a-button>
    </div>
    <div class="warn">
      <a-icon style="color: #c0c4cc; margin-right: 4px" type="info-circle" theme="filled" />点击该按钮后，会发送STATUS#指令，查询状态
    </div>
    <a-table rowKey="id" :pagination="false" :columns="grid.columns" :data-source="grid.data" :locale="locale">
      <div slot="status" slot-scope="text">
        <div class="flex_start" v-if="text == 0">
          <div class="yuan orange"></div>
          <div>执行中</div>
        </div>
        <div class="flex_start" v-if="text == 1">
          <div class="yuan green"></div>
          <div>成功</div>
        </div>
        <div class="flex_start" v-if="text == 2">
          <div class="yuan red"></div>
          <div>失败</div>
        </div>
      </div>
    </a-table>
    <div v-show="grid.total !== 0" style="text-align:right;">
      <a-pagination show-size-changer @showSizeChange="onShowSizeChange" :pageSize="grid.queryParams.pageSize"
        :current="grid.queryParams.pageNum" @change="onChange" style="margin-top:20px;" size="small" :total="grid.total"
        :show-total="total => `共${grid.total}条 `" />
    </div>
  </a-drawer>
</template>
<script>
import Empty from '@/components/Empty/Empty'
import { vehicleCommand, sendVehicleCommand } from '@/services/deviceManament'
export default {
  data () {
    return {
      visible: false,
      locale: {
        emptyText: <Empty />
      },
      grid: {
        total: 0,
        data: [],
        queryParams: {
          deviceNo: '',
          pageSize: 10,
          pageNum: 1
        },
        columns: [
          {
            dataIndex: 'status',
            key: 'status',
            title: '指令发送结果',
            ellipsis: true,
            width: 120,
            scopedSlots: { customRender: 'status' }
          },
          {
            dataIndex: 'userName',
            key: 'userName',
            title: '操作人',
            ellipsis: true,
            width: 130
          },
          {
            dataIndex: 'createTime',
            key: 'createTime',
            title: '操作时间',
            // ellipsis: true
            width: 130
          },
          {
            dataIndex: 'responseTime',
            key: 'responseTime',
            title: '反馈时间',
            // ellipsis: true,
            width: 130
          },
          {
            dataIndex: 'respAsyn',
            key: 'respAsyn',
            title: '反馈结果',
            customRender: text => text || '-',
            width: 170
          }

        ]
      }
    }
  },
  methods: {
    open (record) {
      this.grid.data = []
      this.grid.total = 0
      this.grid.queryParams.pageSize = 10
      this.grid.queryParams.pageNum = 1
      this.grid.queryParams.deviceNo = record.deviceNo
      this.getList()
      this.visible = true
    },
    onClose () {
      this.visible = false
      this.$emit('close')
    },
    async getList () {
      const res = await vehicleCommand(this.grid.queryParams)
      if (res.isSuccess) {
        this.grid.data = res.data.records || []
        this.grid.total = res.data.total
      } else {
        this.$message.newFun(res.msg, 'error', 3)
      }
    },
    // 发送指令
    async onSend () {
      const res = await sendVehicleCommand(this.grid.queryParams.deviceNo)
      const { msg, isSuccess } = res
      if (isSuccess) {
        this.$message.newFun('指令发送成功', 'success', 3)
        this.getList()
      } else {
        this.$message.newFun(msg, 'error', 3)
      }
    },
    onChange (page, pageSize) {
      this.grid.queryParams.pageNum = page
      this.getList()
    },
    onShowSizeChange (current, pageSize) {
      this.grid.queryParams.pageSize = pageSize
      this.grid.queryParams.pageNum = 1
      this.getList()
    }
  }
}
</script>
<style lang="less" scoped>
.warn {
  margin-top: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 400;
  color: #606266;
  line-height: 17px;
}
</style>
